<template>
    <div>

        <van-nav-bar
                title="搜索"
                left-text="返回"
                right-text="按钮"
                left-arrow
                @click-left="onClickLeft"
        />
        <van-search v-model="value" placeholder="请输入搜索关键词"
                    @keydown.up="up"
                    @keydown.down="down"
                    @input="getValue"
                    @keydown.enter="enter"
        />

        <!--        搜索历史-->
        <div class="search_history">
            <div class="serach_history_top">
                搜索历史
                <van-icon name="delete" @click="delAll"/>
            </div>
            <!--            搜索历史小方块-->
            <div class="serach_history_bottom">
                <van-tag plain type="success" v-for="(item,index) in historyList" class="tag"   @click="addToInput(item)">{{item}}</van-tag>
            </div>
        </div>
        <!--        搜索提示-->
        <div class="search-tip" v-if="tipShow">
            <van-cell-group>
                <van-cell :title="item.title" v-for="(item,index) in list" :key="index" value="内容"
                          :class="{bg:index===current}"
                          class="cell_item"
                />
            </van-cell-group>
            <van-empty description="暂时没有搜索推荐哦" v-if="showEmpty"/>
        </div>


    </div>
</template>

<script>
    export default {
        name: "SearchPage",
        data() {
            return {
                value: '', // input输入框里的值
                list: [],  //展示搜索历史的数组
                tipShow: false, //搜索提示是否显示
                current: -1,
                showEmpty: false, // 搜索推荐为空
                historyList: JSON.parse(localStorage.getItem('searchHistory')) || [], //搜索历史数组
            }
        },
        methods: {
            getValue() {
                this.$axios.get('/list.json').then(res => {
                    this.list = [];  //清空数组
                    res.data.result.forEach(ele => {
                        if (this.value.length === 0) {
                            this.tipShow = false;  //展示提示隐藏
                            return false;
                        } else {
                            //展示提示显示
                            this.tipShow = true;
                            // 包含输入关键字 添加到 推荐数组
                            if (ele.title.includes(this.value)) {
                                this.list.push(ele);
                            }
                        }
                    });
                    //暂时没有搜索推荐哦  推荐数组中不包含输入关键字 隐藏 显示
                    this.showEmpty = this.list.length === 0;
                }).catch(err => {
                    console.log(err)
                })
            },
            //回车搜索事件
            enter() {
                this.$router.push({
                    path: '/',
                    query: {
                        keyword: this.value
                    }
                });
                //搜索关键字 存在数组  保存本地
                //indexOf 返回字符串中首次出现的位置  不存在返回-1
                let i = this.historyList.indexOf(this.value);
                //返回-1 说明不存在
                if (i === -1) {
                    this.historyList.unshift(this.value);
                } else {
                    //i 为 -1,说明数据已经存在,先切割,然后把新的值添加到数组的最前面
                    this.historyList.splice(i, 1);
                    this.historyList.unshift(this.value);
                }
                localStorage.searchHistory = JSON.stringify(this.historyList)
            },
            // 点击删除
            delAll() {
                this.$dialog.confirm({
                    message: '确认清空历史记录',
                }).then(() => {
                    this.historyList = [];
                    localStorage.searchHistory = JSON.stringify(this.historyList)
                }).catch(() => {
                        // on cancel
                });
            },
            //点击搜索历史的标签 把值放在输入框里
            addToInput(item){
                this.value = item
            },
            up() {
                if (this.current === -1 || this.current === 0) {
                    this.current = this.list.length - 1;

                } else {
                    this.current--;
                }
                this.value = this.list[this.current].title;
            },
            down() {
                if (this.current < this.list.length - 1) {
                    this.current++;
                } else {
                    this.current = 0;
                }
                this.value = this.list[this.current].title;
            },
            onClickLeft(){
                window.history.back()
            }
        }
    }
</script>

<style scoped>
    /deep/ .tag {
        display: inline-block;
        margin: 10px;
        height: 20px;
        width: 37px;
        text-align: center !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .serach_history_bottom {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        padding: 2px;
        box-sizing: border-box;
        flex-wrap: wrap;
    }

    .cell_item {
        color: #666666;
    }

    .bg {
        background-color: #f5f5f5 !important;
    }

    /deep/ .van-cell__title {
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .serach_history_top {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .search-tip {
        width: 100%;
        height: 50vh;
        background-color: #fff;
        position: absolute;
        overflow: hidden;
        top: 99px;
        left: 0;
        z-index: 55;
    }

</style>